<template>
  <div v-loading="loading">
    <el-form ref="form" :model="form" :rules="rules" label-width="120px" class="dataForm">
      <el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item :label="$t('年月')" prop="days">
              <el-date-picker
                v-model="form.days"
                clearable
                style="width: 200px"
                type="month"
                value-format="yyyy-MM"
                :placeholder="$t('年月')"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <br>
        <div class="area-header">
          <span class="area-header-title">{{ $t('流入') }}</span>
        </div>
        <el-row>
          <el-col :span="12">
            <el-form-item :label="$t('股东投入总额(元)')" prop="totalShareholder">
              <Money v-model="form.totalShareholder" :placeholder="$t('股东投入总额')" @change="balanceTotal" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('累计回笼资金(元)')" prop="totalRecoupFunds">
              <Money v-model="form.totalRecoupFunds" :placeholder="$t('累计回笼资金')" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('累计融资放款(元)')" prop="totalFinancingLending">
              <Money v-model="form.totalFinancingLending" :placeholder="$t('累计融资放款')" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('其他收入(元)')" prop="otherRevenue">
              <Money v-model="form.otherRevenue" :placeholder="$t('其他收入')" />
            </el-form-item>
          </el-col>
        </el-row>
        <br>
        <div class="area-header">
          <span class="area-header-title">{{ $t('流出') }}</span>
        </div>
        <el-row>
          <el-col :span="12">
            <el-form-item :label="$t('返还股东投入(元)')" prop="returnToShareholders">
              <Money v-model="form.returnToShareholders" :placeholder="$t('返还股东投入')" @change="balanceTotal" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('分配利润(元)')" prop="distributionOfProfit">
              <Money v-model="form.distributionOfProfit" :placeholder="$t('分配利润')" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('累计归还融资(元)')" prop="cumulativeRepaymentFinancing">
              <Money v-model="form.cumulativeRepaymentFinancing" :placeholder="$t('累计归还融资')" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('累计总成本(元)')" prop="cumulativeTotalCost">
              <Money v-model="form.cumulativeTotalCost" :placeholder="$t('累计总成本')" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('其他支出项(元)')" prop="otherExpenditure">
              <Money v-model="form.otherExpenditure" :placeholder="$t('其他支出项')" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('地产单方抽调(元)')" prop="propertyUnilateralTransfer">
              <Money v-model="form.propertyUnilateralTransfer" :placeholder="$t('地产单方抽调')" />
            </el-form-item>
          </el-col>
        </el-row>
        <br>
        <div class="area-header">
          <span class="area-header-title">{{ $t('资金余额') }}</span>
        </div>
        <el-col :span="12">
          <el-form-item :label="$t('股东投入余额(元)')" prop="balanceInvestedShareholders">
            <Money v-model="form.balanceInvestedShareholders" :disabled="true" :placeholder="$t('股东投入-股东返还')" /></el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('资金余额-实际(元)')" prop="actualFundBalance">
            <Money v-model="form.actualFundBalance" :placeholder="$t('资金余额-实际')" @change="availableFunds" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('监管户金额(元)')" prop="amountActualSupervision">
            <Money v-model="form.amountActualSupervision" :placeholder="$t('监管户金额')" @change="availableFunds" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('可用资金(元)')" prop="availableFunds">
            <Money v-model="form.availableFunds" :disabled="true" :placeholder="$t('资金余额-监管户金额')" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('贷款余额(元)')" prop="loanBalance">
            <Money v-model="form.loanBalance" :placeholder="$t('贷款余额')" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('担保额度(元)')" prop="guaranteeAmount">
            <Money v-model="form.guaranteeAmount" :placeholder="$t('担保额度')" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('历史抽调我方权益+/义务(元*天)')" prop="historyDrawsOnOurInterests">
            <Money v-model="form.historyDrawsOnOurInterests" :placeholder="$t('历史抽调我方权益+/义务')" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('已实现现金利润(元)')" prop="realizedCashProfit">
            <Money v-model="form.realizedCashProfit" :placeholder="$t('已实现现金利润')" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('未来3-6个月预计发生投资(元)')" prop="expectedInvestment">
            <Money v-model="form.expectedInvestment" :placeholder="$t('未来3-6个月预计发生投资')" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('已预分配利润(元)')" prop="distributedProfit">
            <Money v-model="form.distributedProfit" :placeholder="$t('已预分配利润')" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item :label="$t('备注说明')" prop="remark">
            <el-input v-model="form.remark" type="textarea" :placeholder="$t('备注说明')" show-word-limit maxlength="1000" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer" style="text-align: right;">
      <!--保存 取消按钮-->
      <save-btn has-permi="deal:moneyMonitor" />
    </div>
  </div>
</template>

<script>
    import { saveDealMoneyMonitor, getDealMoneyMonitor, getByDays, getCountByDays } from '@/api/deal/estate/moneyMonitor/dealMoneyMonitor'
    export default {
        data() {
            return {
                // 表单参数
                form: {},
                // 遮罩层
                loading: false,
                // 表单校验
                rules: {
                days: [
                    { required: true, message: this.$t('必填信息'), trigger: 'blur' }, { validator: this.daysList }
                ],
                totalShareholder: [
                    { required: true, message: this.$t('必填信息'), trigger: 'blur' }
                ],
                totalRecoupFunds: [
                    { required: true, message: this.$t('必填信息'), trigger: 'blur' }
                ],
                totalFinancingLending: [
                    { required: true, message: this.$t('必填信息'), trigger: 'blur' }
                ],
                otherRevenue: [
                    { required: true, message: this.$t('必填信息'), trigger: 'blur' }
                ],
                returnToShareholders: [
                    { required: true, message: this.$t('必填信息'), trigger: 'blur' }
                ],
                distributionOfProfit: [
                    { required: true, message: this.$t('必填信息'), trigger: 'blur' }
                ],
                cumulativeRepaymentFinancing: [
                    { required: true, message: this.$t('必填信息'), trigger: 'blur' }
                ],
                cumulativeTotalCost: [
                    { required: true, message: this.$t('必填信息'), trigger: 'blur' }
                ],
                otherExpenditure: [
                    { required: true, message: this.$t('必填信息'), trigger: 'blur' }
                ],
                propertyUnilateralTransfer: [
                    { required: true, message: this.$t('必填信息'), trigger: 'blur' }
                ],
                balanceInvestedShareholders: [
                    { required: true, message: this.$t('必填信息'), trigger: 'blur' }
                ],
                actualFundBalance: [
                    { required: true, message: this.$t('必填信息'), trigger: 'blur' }
                ],
                amountActualSupervision: [
                    { required: true, message: this.$t('必填信息'), trigger: 'blur' }
                ],
                availableFunds: [
                    { required: true, message: this.$t('必填信息'), trigger: 'blur' }
                ],
                loanBalance: [
                    { required: true, message: this.$t('必填信息'), trigger: 'blur' }
                ],
                guaranteeAmount: [
                    { required: true, message: this.$t('必填信息'), trigger: 'blur' }
                ],
                historyDrawsOnOurInterests: [
                    { required: true, message: this.$t('必填信息'), trigger: 'blur' }
                ],
                realizedCashProfit: [
                    { required: true, message: this.$t('必填信息'), trigger: 'blur' }
                ],
                expectedInvestment: [
                    { required: true, message: this.$t('必填信息'), trigger: 'blur' }
                ],
                distributedProfit: [
                    { required: true, message: this.$t('必填信息'), trigger: 'blur' }
                ]
                }
            }
        },
      mounted() {
        this.$bus.$emit('async_done')
      },
        created() {
        },
        methods: {
            // 初始化数据
            init(data) {
                this.loading = true
                if (data != null && data.id !== undefined) {
                    getDealMoneyMonitor(data.id).then(response => {
                        this.form = response.data
                        this.loading = false
                    })
                } else {
                  this.reset()
                  getByDays(this.form.dealId).then(response => {
                    if (response.data != null) {
                      this.form = response.data
                      this.form.id = undefined
                    }
                  })
                  this.loading = false
                }
            },
            // 表单重置
            reset() {
                this.form = {
                    id: undefined,

                    dealId: this.$route.query.id,

                    days: undefined,

                    totalShareholder: undefined,

                    totalRecoupFunds: undefined,

                    totalFinancingLending: undefined,

                    otherRevenue: undefined,

                    returnToShareholders: undefined,

                    distributionOfProfit: undefined,

                    cumulativeRepaymentFinancing: undefined,

                    cumulativeTotalCost: undefined,

                    otherExpenditure: undefined,

                    propertyUnilateralTransfer: undefined,

                    balanceInvestedShareholders: undefined,

                    actualFundBalance: undefined,

                    amountActualSupervision: undefined,

                    availableFunds: undefined,

                    loanBalance: undefined,

                    guaranteeAmount: undefined,

                    historyDrawsOnOurInterests: undefined,

                    realizedCashProfit: undefined,

                    expectedInvestment: undefined,

                    distributedProfit: undefined,

                    remark: undefined,

                    delFlag: undefined,

                    createBy: undefined,

                    createTime: undefined,

                    updateBy: undefined,

                    updateTime: undefined

                }
                this.resetForm('form')
            },
            // 取消按钮
            cancel() {
                this.$parent.$parent.formOpen = false
                this.$parent.$parent.reset()
            },
            // 关闭form页面
            closeForm() {
                // 关闭form页面遮罩层
                this.loading = false
                // 关闭form页面
                if (this.$parent.$parent.formOpen !== undefined) {
                  this.$parent.$parent.formOpen = false
                }
                // 刷新list页面
                if (this.$parent.$parent.getList !== undefined) {
                  this.$parent.$parent.getList()
                }
            },
            /** 提交按钮 */
            submitForm: function() {
                this.$refs['form'].validate(valid => {
                    if (valid) {
                        this.loading = true
                        saveDealMoneyMonitor(this.form).then(response => {
                            if (response.code === 200) {
                                this.msgSuccess(this.$t('保存成功'))
                                this.closeForm()
                            } else {
                                this.msgError(response.msg)
                            }
                            this.loading = false
                        })
                    } else {
                       this.locationError(document)
                    }
                })
           },
          async daysList(rule, value, callback) {
            if (this.form.days != null) {
              var daysList = await getCountByDays(this.form.days, this.form.dealId, this.form.id)
              var aData = new Date()
              this.value = aData.getFullYear() + '-' + (aData.getMonth() + 1)
              if (new Date(this.form.days).getTime() === new Date(this.value).getTime() || new Date(this.form.days).getTime() > new Date(this.value).getTime()) {
                callback(new Error(this.$t('年月不可等于本月也不可比本月晚!')))
              } else if (daysList.data != null) {
                callback(new Error(this.$t('日期不能重复')))
              } else {
                callback()
              }
            } else {
              callback()
            }
          },
          // 计算股东投入余额
          balanceTotal() {
            var totalShareholder = this.form.totalShareholder ? Number(this.form.totalShareholder) : 0
            var returnToShareholders = this.form.returnToShareholders ? Number(this.form.returnToShareholders) : 0
            this.form.balanceInvestedShareholders = totalShareholder - returnToShareholders
          },
          // 计算可用资金
          availableFunds() {
            var actualFundBalance = this.form.actualFundBalance ? Number(this.form.actualFundBalance) : 0
            var amountActualSupervision = this.form.amountActualSupervision ? Number(this.form.amountActualSupervision) : 0
            this.form.availableFunds = actualFundBalance - amountActualSupervision
          }
        }
    }
</script>
